@(session: MovieSession, paymentForm: Form[PaymentForm], seats: Array[String], user: User)(implicit lang: Lang)

@import helper._
@implicitFieldConstructor = @{ FieldConstructor(bootstrap.render) }


@main("The Cult Cinema Inc. Movie"){

	<section style="padding-top:60px">
				<div class="row">
					<div class="span12">
						<ul class="breadcrumb">
							<li><a href="@routes.Application.index(lang.code)">@Messages("home")(lang)</a> <span class="divider">/</span></li>
							<li><a href="@routes.MovieManager.list(lang.code)">@Messages("movie")(lang)</a> <span class="divider">/</span></li>
							<li><a href="@routes.MovieManager.detail(session.movie.id, lang.code)">@session.movie.infos.get(0).name</a> <span class="divider">/</span></li>
							<li><a href="@routes.MovieManager.session(session.id, lang.code)">@Messages("movie.seating")(lang)</a> <span class="divider">/</span></li>
		        			<li class="active">@Messages("payment")(lang)</li>
		        		</ul>
					</div>
				</div>


				@if(paymentForm.hasErrors) {
					<div class="row">
						<div class="span12">
				    	    <div class="alert-error alert alert-block">
				    	    	<h4 class="alert-heading">@Messages("error")(lang)
					    	    	@if(paymentForm.hasGlobalErrors) { # @Messages(paymentForm.globalError.message)(lang) }
				    	    	</h4>
					    	</div>
						</div>
					</div>
				}

				<div class="row">
					<div class="span6">
						<div class="well">
							<h3 style="color:#999"><i class="icon-film"></i> @session.movie.infos.get(0).name</h3>
							<table class="table">
								<thead>
									<tr>
										<th width="20%">@Messages("movie.date")(lang)</th>
										<th width="40%">@Messages("movie.time")(lang)</th>
										<th width="40%">@Messages("movie.ticket.language")(lang)</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>@session.showtime.format("dd-MM-yyyy")</td>
										<td>@session.showtime.format("hh:mmaa") - @(new Date(session.showtime.getTime()+(60*1000*session.movie.duration)).format("hh:mmaa")) (@(session.movie.duration)@(Messages("movie.minutes")(lang)))</td>
										<td>@Messages("movie.language",session.lang)(lang)</td>
									</tr>
								</tbody>
							</table>
							<br />
							<h4 style="color:#999"><i class="icon-bookmark-empty"></i> @Messages("movie.ticket")(lang)</h4>
							<table class="table table-bordered table-striped table-hover">
								<thead>
									<tr>
										<th width="20%">@Messages("movie.ticket.house")(lang)</th>
										<th width="60%">@Messages("movie.ticket.seat")(lang)</th>
										<th width="20%">@Messages("movie.ticket.price")(lang)</th>
									</tr>
								</thead>
								<tbody>
									@for(seat <- seats){
									<tr>
										<td>@session.house.id</td>
										<td>@seat</td>
										<td>$@session.price</td>
									</tr>
									}
								</tbody>
								<tfoot>
									<tr class="loyaltyUsed" style="display:none">
										<td colspan="2" style="text-align:right">@Messages("movie.payment.loyaltyUsed")(lang): </td>
										<td><span id="pts">0</span> @Messages("movie.payment.points")(lang) </td>
									</tr>
									<tr>
										<td colspan="2" style="text-align:right">@Messages("movie.ticket.total")(lang): </td>
										<td>$<span id="total">@(session.price*seats.length)</span></td>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>
					<div class="span6">
						@helper.form(action = routes.MovieManager.confirm, 'class -> "form-horizontal well") {

					        <fieldset>
					        	<legend><i class="icon-credit-card"></i> @Messages("movie.payment")(lang)
					        		<div style="float:right"><img src="@routes.Assets.at("images/visa.png")" /></div>
					        	</legend>


									@inputText(
										paymentForm("email"),
										'_label -> Messages("movie.payment.email")(lang),
										'_help -> "Please enter a valid email.",
										'_error -> paymentForm.globalError
									)

									@inputText(
										paymentForm("credit_card"),
										'_label -> Messages("movie.payment.creditcard")(lang),
										'_help -> "Please enter your credit card number.",
										'_error -> paymentForm.globalError
									)




					            <div class="control-group">
						        	<label class="control-label" for="expiry_month">@Messages("movie.payment.expire")(lang)</label>
						        	<div class="controls">
							        	<select id="expiry_month" name="expiry_month" class="input-mini">
								        	<option>01</option>
								        	<option>02</option>
								        	<option>03</option>
								        	<option>04</option>
								        	<option>05</option>
								        	<option>06</option>
								        	<option>07</option>
								        	<option>08</option>
								        	<option>09</option>
								        	<option>10</option>
								        	<option>11</option>
								        	<option>12</option>
								        </select>
							        	<select id="expiry_year" name="expiry_year" style="width:160px;">
								        	<option>2013</option>
								        	<option>2014</option>
								        	<option>2015</option>
								        	<option>2016</option>
								        	<option>2017</option>
								        	<option>2018</option>
								        	<option>2019</option>
								        	<option>2020</option>
								        	<option>2021</option>
								        	<option>2022</option>
								        </select>
								    </div>
						        </div>

									@if(user!=null) {
									  <hr>


									  <div class="alert alert-info">
											@Messages("movie.payment.available")(lang): @user.points @Messages("movie.payment.points")(lang)
										</div>

									  <div class="control-group">
									  <label class="control-label" for="useLoyaltyPts">@Messages("movie.payment.useLoyalty")(lang)</label>
										  <div class="controls">
										  	<input type="checkbox" name="useLoyaltyPts" onchange="useLoyalty(this)">
										  </div>
									  </div>

									  <div class="loyaltyUsed" style="display:none">
											@inputText(
													paymentForm("points"),
													'_label -> Messages("movie.payment.loyaltyToUse")(lang),
													'id -> "pointsInput",
													'onkeyup -> "changePointsToUse(this)",
													'onchange -> "changePointsToUseNoEmpty(this)"
												)
									  </div>
								  } else {
									<input type="hidden" name="points" value="0">
								  }

									<input type="hidden" name="seats" value="@seats(0)@for(i <- 1 to seats.length-1){:@seats(i)}">
									<input type="hidden" name="session" value="@session.id">
									<input type="hidden" name="lang" value="@lang.code">
									<input type="hidden" name="orgTotal" id="orgTotal" value="@(session.price*seats.length)">
									@if(user!=null){
										<input type="hidden" name="avaPoints" id="avaPoints" value="@(user.points)">
									}

					        </fieldset>

					        <div class="form-actions">
					        	<button type="submit" class="btn btn-primary">@Messages("movie.payment.confirm")(lang)</button>
					        	<button type="reset" class="btn">@Messages("movie.payment.reset")(lang)</button>
					        </div>

						}

					</div>
				</div>
				<div class="row">
					<div class="span6">
					</div>
				</div>
				<script>
					function isInt(n) {
						   return typeof n === 'number' && parseFloat(n) == parseInt(n, 10) && !isNaN(n);
						}

					function useLoyalty(cb)
					  {
						if(cb.checked) {
							$('.loyaltyUsed').show();
							$('#pointsInput').val('0');
						} else {
							$('#pts').text('0');
							$('.loyaltyUsed').hide();
							$('#pointsInput').val('0');
							$('#total').text($('#orgTotal').val());
						}
					  }

						function changePointsToUse(input)
						{
							if(isInt(parseInt(input.value)) && input.value >= 0 && (input.value<=parseInt($('#avaPoints').val()))) {
								$('#pts').text(input.value);
								$('#total').text( $('#orgTotal').val() - parseInt(input.value));
							} else if  (input.value !=""){
								input.value = 0;
								$('#pts').text('0');
								$('#total').text($('#orgTotal').val());
							}
						}

						function changePointsToUseNoEmpty(input)
						{
							if  (input.value == ""){
								input.value = 0;
								$('#pts').text('0');
								$('#total').text($('#orgTotal').val());
							}
						}




				</script>


	</section>
}(lang)